<template>
  <transition name="drop">
    <div class="info-tip" v-show="showInfoTip" @click.stop="hide">
      <slot>
        <div class="content">
          <span class="number">
           <!-- {{quantity}} -->
           {{timeNum}}
          </span>
          <span class="context">添加成功</span>
        </div>
      </slot>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import { mapGetters, mapMutations } from 'vuex';
  export default {
    props: {
      delay: {
        type: Number,
        default: 1000
      },
      showInfoTip: {
        type: Boolean,
        default: false
      },
      selectedQuantity: {
        type: Number,
        default: 0
      }
    },
    created() {
      console.log(this.quantity)
      console.log(this.getBuyingQuantity)
    },
    data() {
      return {
        quantity: this.selectedQuantity,
        timeNum: 3,
        canClick: true
      }
    },
    methods: {
      hide() {
        this.$emit('click', false)
        // this.timeNum = 3
      },
      ...mapMutations('lottery', {
        setBuyingQuantity: 'SET_BUYING_QUANTITY'
      })
    },
    computed: {
      ...mapGetters('lottery', ['getBuyingQuantity'])
    },
    watch: {
      showInfoTip(newVal) {
        if (newVal == true) {
          if(this.timeNum <= 0){
            this.timeNum = 3
          }
        //   clearTimeout(this.timer)
        //   this.timer = setTimeout(() => {
        //     this.hide()
        //   }, this.delay)
          if (!this.canClick) return
          this.canClick = false
          let clock = window.setInterval(() => {
            this.timeNum--
            if (this.timeNum < 1) {
              this.hide()
              window.clearInterval(clock)
              this.canClick = true
            }
          },1000)
        }
      },
      'selectedQuantity'(newVal, oldVal) {
        console.log(newVal, oldVal)
        if (newVal > 0) {
          console.log(newVal, 'new')
          this.quantity = newVal
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/assets/styles/variables.styl"
  .info-tip
    position: fixed
    top: 50%
    left 50%
    transform translate(-50%, -50%)
    width: 130px
    height 45px
    line-height 45px
    z-index: 500
    border-radius 3px 
    background: rgba(#313030, 0.9)
    color #fff
    &.drop-enter-active, &.drop-leave-active
      transition: all 0.2s
    &.drop-enter, &.drop-leave-to
      transform: opacity 0
    .content 
      display flex 
      align-items center
      justify-content center
      .number 
        width 20px 
        height 20px 
        line-height 20px
        border-radius 50%
        text-align center
        border 1px solid #595959 
        margin-right 10px

</style>